<div class="blue-main-content">
    <div class="blue-box blue-box-main">
        <input type="file"  style="display: none" id="imgInput" accept="image/gif,image/jpeg,image/jpg,image/png"/>
        <form class="form-horizontal" id="roleForm">
            <div class="row">
                <div class="col-xs-6">
                    <div class="form-group">
                        <label class="control-label col-sm-4">
                            <span class="blue-required ">*</span> 体温上传：<i class="fa icon-question hide"></i>
                        </label>
                        <div class="col-sm-8">
                            <div class="input-group">
                                <input class='form-control' type='text' name="image" id="image" placeholder="请选择上传的图片"/>
                                <span class="required hide" style="color: red" id="imageError">图片类型仅允许：gif/jpeg/jpg/png</span>
                                <div class='input-group-btn'>
                                    <button type="button" class="btn btn-default" onclick="imgUpLoad();">
                                        <i class='glyphicon glyphicon-folder-open'></i>
                                    </button>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-6">
                    <div class="form-group">
                        <label class="control-label col-sm-4">
                            <span class="blue-required hide" >*</span> <i class="fa icon-question hide"></i>
                        </label>
                        <div class="col-sm-8">
                            <div class="input-group">
                                <img id="preview"/>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </form>

    </div>
</div>
<script>
    $(function () {
        $('#imgInput').on('change', function(e) {
            var obj = this;//获取到文件列表
            fileReader(obj);
        });
    });

   function imgUpLoad() {
       $('#imgInput').click();
   }

   function fileReader(obj) {
       var file = obj.files,
           fileName = file[0].name;
       $('#image').val(fileName);
       console.log(file);
       var img = document.getElementById('preview');
       var reader = new FileReader();
       if (/image/.test(file[0].type)){
           reader.readAsDataURL(file[0]);
       }else {
           obj.value = "";
           $('#image').val("");
           $('#imageError').removeClass("hide");
       }

       reader.onload = function (ev) {
           console.log(reader);
           var image = new Image();
           console.log(reader.result);
           image.src = reader.result;
           image = DrawImage(image, 300, 300);
           // reader.result = image.src;
           img.src = image.src;
           // img.src = reader.result;
           // DrawImage();
/*           $("#preview").each(function () {
               DrawImage(this, 300, 300);
           });*/
       }
   };

   function DrawImage(ImgD, FitWidth, FitHeight) {
       var image = new Image();
       image.src = ImgD.src;
       if (image.width > 0 && image.height > 0) {
           if (image.width / image.height >= FitWidth / FitHeight) {
               if (image.width > FitWidth) {
                   ImgD.width = FitWidth;
                   ImgD.height = (image.height * FitWidth) / image.width;
               } else {
                   ImgD.width = image.width;
                   ImgD.height = image.height;
               }
           } else {
               if (image.height > FitHeight) {
                   ImgD.height = FitHeight;
                   ImgD.width = (image.width * FitHeight) / image.height;
               } else {
                   ImgD.width = image.width;
                   ImgD.height = image.height;
               }
           }
       }
       return ImgD;
   };
</script>
